<template>
    <div>
        <div>
            <el-breadcrumb separator="/" style="margin: 8px;">
                <el-breadcrumb-item>AB测试</el-breadcrumb-item>
                <el-breadcrumb-item>实验管理</el-breadcrumb-item>
                <el-breadcrumb-item>报告详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" style="min-height: 80vh;">
            <h3 style="cursor: pointer;" @click="goback">
                <i class="el-icon-back"></i>
                报告详情
            </h3>
            <h4 style="margin-top: 20px;margin-left: 30px;">总体概览</h4>
            <el-row style="margin-top: 8px;margin-left:30px">
                <table class="right_table" cellspacing="0">
                    <tr>
                        <td class="label">实验名称</td>
                        <td class="data">domain_attack1</td>
                        <td class="label">实验预警模型</td>
                        <td class="data">domain_attack2</td>
                        <td class="label">数据选择</td>
                        <td class="data">domain_attack3</td>
                    </tr>
                    <tr>
                        <td class="label">实验周期</td>
                        <td class="data">domain_attack4</td>
                        <td class="label">实验指标</td>
                        <td class="data">domain_attack5</td>
                        <td class="label">实验流量</td>
                        <td class="data">domain_attack6</td>
                    </tr>
                </table>
            </el-row>
            <h4 style="margin-top: 20px;margin-left: 30px;">实验分析</h4>
            <el-form :inline="true" :model="formInline" class="demo-form-inline"
                style="margin-top: 20px;margin-left: 30px;">
                <el-form-item label="时间筛选">
                    <el-date-picker type="daterange" class="common-input " range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" v-model="formInline.date1"></el-date-picker>
                </el-form-item>
                <el-select v-model="formInline.region" placeholder="请选择" class="small-input">
                    <el-option label="日维度" value="0"></el-option>
                    <el-option label="分维度" value="1"></el-option>
                </el-select>

                <el-form-item style="margin-left: 20px;">
                    <el-button type="primary" @click="onSubmit">确定</el-button>
                    <el-button type="info" @click="handleClean" plain>重置</el-button>
                </el-form-item>
            </el-form>
            <h4 style="margin-top: 20px;margin-left: 30px;">累计流量</h4>
            <el-col style="margin-top: 20px;margin-left: 30px;">
                <el-table :data="tableData1" class="table" style="width: 900px;" align="center" ref="table">
                    <el-table-column prop="num1" align="center" label="总体流量(千)"></el-table-column>
                    <el-table-column prop="num2" align="center" label="实验组(千)"></el-table-column>
                    <el-table-column prop="num3" align="center" label="对照组(千)"></el-table-column>
                </el-table>
            </el-col>

            <h4 style="margin-top: 20px;margin-left: 30px;">实验结果</h4>
            <div class="echart" style="margin-top: 20px;margin-left: 30px;" id="mychart"></div>

            <h4 style="margin-top: 20px;margin-left: 30px;">实验日志</h4>
            <el-col style="margin-top: 20px;margin-left: 30px;">
                <el-table :data="tableData2" class="table" style="width: 900px;" align="center" ref="table">
                    <el-table-column prop="num1" align="center" label="数据id"></el-table-column>
                    <el-table-column prop="num2" align="center" label="实验分组"></el-table-column>
                    <el-table-column prop="num3" align="center" label="时间"></el-table-column>
                    <el-table-column prop="num4" align="center" label="结果"></el-table-column>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" class="blue"
                                @click="handleEdit(scope.$index, scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <div style="margin-bottom:130px"></div>

        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import { fetchData } from '../../api/index';
export default {
    data() {
        return {
            id: "",
            resultData: {},
            formInline: {},
            tableData1: [],
            tableData2: [],
        };
    },
    mounted() {
        this.id = this.$route.query.id;
        console.log(this.id);
        this.getData();
    },
    methods: {
        getData() {
            // this.$http.fetchGet('api/warnMessage/listOne/this.id').then(res => {
            //     console.log(res);
            //     this.pageTotal = 1;
            // })
            let res = {
                "id": 357,
                "uid": 1,
                "version": "2.3.0",
                "createTime": "2024-05-01 12:02:03",
                "ecology": "tensolve-floow",
                "healthyPoint": 9.8,
                "securityRisk": 78,
                "impactScope": 94,
                "versionMaintenance": 73,
                "communityEngagement": 89,
                "group": "group",
                "type": "",
                "name": "",
                "info": "",
            }
            this.resultData = res;
            this.controlResult(res);
        },
        controlResult(res) {
            this.showChart();

        },
        showChart() {
            let option = {
                title: {
                    text: 'S',
                    show: false
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
                },
                grid: {
                    top: 40,
                    left: 40,
                    right: 40,
                    bottom: 40,
                    containLabel: true
                },
                toolbox: {
                },
                xAxis: {
                    type: 'category',
                    axisLabel:{
                        show:false
                    },
                    boundaryGap: true,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    splitLine: {
                        //网格线
                        show: true,
                        lineStyle: {
                            color: ["#000"],
                            type: "dotted",
                        },
                    },
                    axisLine: {
                      show: true,  //这个是需要主动添加上去的，默认是false
                      symbol: ['none', 'arrow'] // 只在末端显示箭头
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel:{
                        show:false
                    },
                    axisLine: {
                      show: true,  //这个是需要主动添加上去的，默认是false
                      symbol: ['none', 'arrow'] // 只在末端显示箭头
                    },
                    splitLine: {
                        //网格线
                        show: true,
                        lineStyle: {
                            color: ["#000"],
                            type: "dotted",
                        },
                    },
                },
                series: [
                    {
                        name: '实验组',
                        type: 'line',
                        stack: 'Total',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '对照组',
                        type: 'line',
                        stack: 'Total',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    }
                ]
            };
            const myChart = echarts.init(document.getElementById("mychart"));// 图标初始化
            myChart.setOption(option);// 渲染页面
        },
        goback() {
            this.$router.back();
        }
    }
};
</script>

<style scoped>
.common-width {
    width: 200px;
}

.common-select {
    width: 350px;
}

.common-input {
    width: 350px;
}

.small-input {
    width: 225px;
}

.table {
    width: 100%;
    font-size: 14px;
}

.label {
    font-size: 14px;
    font-weight: bold;
    color: black;
}

.text {
    font-size: 14px;
    margin-top: 8px;
    color: black;
}

.echart {
    width: 900px;
    height: 350px;
}

.right_table {
    border-collapse: collapse;
    width: 90%;

    tr {
        height: 60px;
    }

    td {
        border: 0.5px solid rgb(198, 198, 198);
    }

    .label {
        height: 60px;
        line-height: 60px;
        text-align: right;
        padding-right: 15px;
        background-color: rgb(237, 237, 237);
    }

    .data {
        padding-left: 5px;
        background-color: rgb(255, 255, 255);
    }
}
</style>
